<template>
  <div ref="artList" @scroll="onScroll" class="artilce-list">
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          @click="$router.push(`/article?id=${item.art_id}`)"
        >
          <template>
            <!-- 标题部分 -->
            <div>{{ item.title }}</div>
            <!-- 图片部分 -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item
                v-for="(pic, index) in item.cover.images"
                :key="index"
              >
                <van-image :src="pic" />
              </van-grid-item>
            </van-grid>

            <!-- 底部部分 -->
            <div class="info-box">
              <div>
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ item.pubdate | relvTime }}</span>
              </div>
              <van-icon name="cross" />
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入接口
import { articleListAPI } from "@/api/article";
export default {
  name: "articleList",
  props: {
    channel_id: {
      // 必填
      required: true,
    },
  },
  data() {
    return {
      pullLoading: false,
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      // 用来记录当前向上滚出去的距离
      scrollTop: 0
    };
  },

  methods: {
    async onLoad() {
      // 发请求
      const res = await articleListAPI({
        // 频道id
        channel_id: this.channel_id,
        // 获取新闻的时间戳
        timestamp: this.timestamp,
      });

      // 把上一个时间段新闻的时间戳给保存起来
      this.timestamp = res.data.pre_timestamp;

      // 把返回的新闻列表加到数组里
      // 不能用赋值，因为会覆盖导致铺不满，一直在闪
      //  this.list = res.data.results
      this.list.push(...res.data.results);

      // 当本次加载完数据后要把loading改为false
      // loading为true代表加载中，onLoad调用会自动把他改成true
      // 所以当我们自己加载完数据要改为false，才可以进行下次加载
      this.loading = false;

      // 如果加载完了，返回的时间戳为null，所以这里取反代表判断他是否为null
      // 为null就把finished改为true，代表加载完了不要加载
      if (!this.timestamp) {
        this.finished = true;
      }
    },

    // 下拉刷新调用的方法
    async onRefresh() {
      // 调用接口发请求获取最新的新闻
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: Date.now(),
      });

      // 保存上一个时间段的时间戳，方便用户下次继续往上拉滚动
      this.timestamp = res.data.pre_timestamp;
      // 记得要用覆盖的形式
      this.list = res.data.results;
      // 把加载状态关掉
      this.pullLoading = false;

      // 把加载完成的状态改为false
      // 因为只要下拉刷新了，代表又是从头开始的新数据
      this.finished = false;
    },

    // 滚动触发的事件
    onScroll () {
      // console.log('滚动了', this.$refs.artList.scrollTop)
      this.scrollTop = this.$refs.artList.scrollTop
    }
  },

  activated() {
    // 把记录的滚动条距离重新赋值给大盒子的滚动条
    this.$refs.artList.scrollTop = this.scrollTop
  },

  // deactivated() {
  //   // 它是页面看不到了才调用
  //   // 那就意味着，你这时候获取滚动条，相当于已经没了，没了相当于滚动条滚出去就是0
  //   console.log("失活了", this.$refs.artList.scrollTop);
  // },
};
</script>

<style lang="less" scoped>
.artilce-list {
  position: fixed;
  width: 100%;
  /* 导航栏的高度+频道栏的高度 */
  top: 90px;
  bottom: 50px;
  overflow: auto;

  .info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: 12px;
      color: gray;
      &:nth-child(2) {
        margin: 0 10px;
      }
    }
  }
}
</style>